---
title: crwdns63586:0crwdne63586:0
image: crwdns63588:0crwdne63588:0
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

crwdns63590:0crwdne63590:0

<Tabs>

<Tab title="Usage">

```jsx
import { Tag } from "@/ui/display/tag/components/Tag";

export const MyComponent = () => {
  return (
    <Tag
      className
      color="red"
      text="Urgent"
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| crwdns63592:0crwdne63592:0 | crwdns63594:0crwdne63594:0 | crwdns63596:0crwdne63596:0                                                            |
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| crwdns63598:0crwdne63598:0 | crwdns63600:0crwdne63600:0 | crwdns63602:0crwdne63602:0                                                            |
| crwdns63604:0crwdne63604:0 | crwdns63606:0crwdne63606:0 | crwdns63608:0crwdne63608:0 crwdns63610:0crwdne63610:0 |
| crwdns63612:0crwdne63612:0 | crwdns63614:0crwdne63614:0 | crwdns63616:0crwdne63616:0                                                            |
| crwdns63618:0crwdne63618:0 | crwdns63620:0crwdne63620:0 | crwdns63622:0crwdne63622:0                                                            |

</Tab>

</Tabs>
